<script>
export default {
  props: {
    panelKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: true,
      placement: '',
      position: undefined,
      height: 'auto',
      width: 'auto',
      closeIcon: true,
      params: {},
      componentEvents: {}
    }
  },
  computed: {},
  created() {
    if (!this.position) {
      this.position = {
        top: '100px',
        right: this.computeRight()
      }
    } else {
      if (this.position.right && this.position.right === 'auto') {
        this.position.right = this.computeRight()
      }
    }
    switch (this.placement) {
      case 'topRight':
        this.position = {
          top: '100px',
          right: this.computeRight()
        }
        break
      case 'bottomRight':
        this.position = {
          bottom: '0px',
          right: this.computeRight()
        }
        break
      case 'topLeft':
        this.position = {
          top: '30px',
          left: '230px'
        }
        break
      case 'bottomLeft':
        this.position = {
          bottom: '0px',
          left: '230px'
        }
        break
    }
  },
  mounted() {},
  methods: {
    destory() {
      this.show = false
      this.$emit('closed')
      return null
    },
    computeRight() {
      const rightDom = document.querySelector('.right.one-map-right-slide')
      const rect = rightDom.getBoundingClientRect()
      if (!rect.x) {
        return '60px'
      }
      const bodyWidth = document.body.clientWidth
      return `${bodyWidth - rect.x + 60}px`
    }
  },
  render(h) {
    if (!this.show) {
      return null
    }
    return h(
      'div',
      {
        attrs: {
          class: `one-map-panel panel-${this.panelKey}`
        },
        style: {
          ...this.position,
          height: this.height,
          width: this.width
        }
      },
      [
        h(
          'div',
          {
            attrs: {
              class: `wt-map-title`
            }
          },
          [
            h(
              'span',
              {
                attrs: {
                  class: `mt-left`
                }
              },
              '标题'
            ),
            h(
              'span',
              {
                attrs: {
                  class: `mt-right close-btn`
                },
                style: {
                  display: this.closeIcon ? 'block' : 'none'
                },
                on: {
                  click: () => {
                    this.destory()
                  }
                }
              },
              '关闭'
            )
          ]
        ),
        h(
          'div',
          {
            attrs: {
              class: 'wt-map-content'
            }
          },
          [
            this.$createElement('panel-component', {
              ref: 'comp',
              props: {
                ...this.params
              },
              on: {
                ...this.componentEvents
              }
            })
          ]
        )
      ]
    )
  }
}
</script>

<style lang="scss" scoped>
.one-map-panel {
  position: absolute;
  z-index: 99;
  background: linear-gradient(
    270deg,
    rgba(35, 69, 115, 0.75) 0%,
    rgba(22, 43, 75, 0.75) 100%
  );
  box-shadow: 0px 2px 4px 0px rgba(5, 20, 36, 0.42);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  .wt-map-title {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    .close-btn {
      float: right;
      font-size: 18px;
      cursor: pointer;
    }
  }
  .wt-map-content {
    flex: 1;
    height: 0;
    padding: 10px 20px;
    // border: 1px solid #ffff;
  }
}
</style>
